<style scoped lang="scss">
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
<template>
    <div class="layout">
<<<<<<< HEAD

=======
>>>>>>> fd46d9f1424bfda3b6e02d34019b40a6fec3facd
        <div v-if="login">
            <Layout :style="{minHeight: '100vh'}">
                <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                    <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses" @on-select="navto">
                        <MenuItem name="首页管理">
                        <router-link to="/" active-class="active" exact>
                            <Icon type="ios-home"></Icon>
                            <span>首页管理</span>
                        </router-link>
                        </MenuItem>
                        <MenuItem name="分类管理">
                        <router-link to="/cate" active-class="active">
                            <Icon type="social-dropbox-outline"></Icon>
                            <span>分类管理</span>
                        </router-link>
                        </MenuItem>
                        <MenuItem name="用户管理">
                        <router-link to="/user" active-class="active">
                            <Icon type="android-person"></Icon>
                            <span>用户管理</span>
                        </router-link>
                        </MenuItem>
                        <MenuItem name="新闻管理">
                        <router-link to="/news" active-class="active">
                            <Icon type="ios-world-outline"></Icon>
                            <span>新闻管理</span>
                        </router-link>
                        </MenuItem>
                        <MenuItem name="评论管理">
                        <router-link to="/comment" active-class="active">
                            <Icon type="ios-compose-outline"></Icon>
                            <span>评论管理</span>
                        </router-link>
                        </MenuItem>
                        <MenuItem name="产品管理">
                        <router-link to="/product" active-class="active">
                            <Icon type="social-chrome-outline"></Icon>
                            <span>产品管理</span>
                        </router-link>
                        </MenuItem>
                        <MenuItem name="上传管理">  
                        <router-link to="/upload" active-class="active">
                            <Icon type="ios-cloud-upload-outline"></Icon>
                            <span>上传管理</span>
                        </router-link>
                        </MenuItem>
                    </Menu>
                </Sider>
                <Layout>
                    <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                        <Row>
                            <Col span="8">
                            <Icon type="beer" size="30" color="#2b85e4"></Icon>
                            <span style="font-size:30px;color:#2b85e4;margin-left:6px">管理系统</span>
                            </Col>
                            <Col span="6" offset="10">
                                <Icon type="android-happy"></Icon>
                                欢迎
                                <Tag checkable color="blue">{{formInline.user}}</Tag>
                                回来！
                                <Button type="error" @click="outLogin">退出登录</Button>
                            </Col>
                        </Row>
                    </Header>
                    <Content :style="{padding: '0 16px 16px'}">
                        <Breadcrumb :style="{margin: '16px 0'}">
                            <BreadcrumbItem>首页</BreadcrumbItem>
                            <BreadcrumbItem>{{title?title:'首页管理'}}</BreadcrumbItem>
                        </Breadcrumb>
                        <Card>
                            <div style="height: 600px">
                                
                                <router-view></router-view>

                            </div>
                        </Card>
                    </Content>
                </Layout>
            </Layout>
        </div>
        <div v-else>
            <div class="center">           
                <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                    <FormItem prop="user">
                        <Input type="text" v-model="formInline.user" placeholder="Username">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="Password">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex';
    export default {
        data () {
            return {
                isCollapsed: false,
                 title:'',
                 formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
<<<<<<< HEAD
=======
<<<<<<< HEAD
=======
<<<<<<< HEAD
                
=======
>>>>>>> f04899c99bce92016ab2821cc938e951b0526f9b
>>>>>>> fd46d9f1424bfda3b6e02d34019b40a6fec3facd
>>>>>>> d8edf4e9c557f65022b899f9130c7e8410e1f59f
        },
       
        computed: {
            ...mapGetters(['login']),
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods:{
            changeSpan(e){
                var e = e.target || e.srcElement
            },
            ...mapActions(['checkLogin']),
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$http({
                            method: "post",
                            url:'http://localhost:3000/users/login',
                            data:{
                                name:this.formInline.user,
                                password:this.formInline.password
                            }
                        }).then(res=>{
                            if(res.data.name){
                                this.loginBtn_local(this.formInline.user,this.formInline.password)
                                this.$Message.success('登录成功，请稍后。。。');
                                this.checkLogin(true);
                                this.get_local();
                                this.$router.push('/')
                            }else{
                               this.$Message.error('登录失败')
                            }
                        })
                        
                    } else {
                         this.$Message.error('输入的格式不对')
                    }
<<<<<<< HEAD
=======
<<<<<<< HEAD
                })
=======
<<<<<<< HEAD
>>>>>>> d8edf4e9c557f65022b899f9130c7e8410e1f59f
                }
            )},
            navto(name){
                this.title = name
            },
            loginBtn_local(strName,strPass){
                localStorage.setItem('keyName',strName);
               // if($('#remember').is(':checked')){
                    localStorage.setItem('keyPass',strPass);
               // }else{
               //    localStorage.removeItem('keyPass');
               // }
            },
            get_local(){
                this.formInline.user = localStorage.getItem('keyName');
            },
            outLogin(){
                this.checkLogin(false);
                localStorage.removeItem('keyName');
                localStorage.removeItem('keyPass');
                this.formInline.user = '请登录'
                this.formInline.user = ''
<<<<<<< HEAD
=======
=======
                })
>>>>>>> f04899c99bce92016ab2821cc938e951b0526f9b
>>>>>>> fd46d9f1424bfda3b6e02d34019b40a6fec3facd
>>>>>>> d8edf4e9c557f65022b899f9130c7e8410e1f59f
            }
        }
    }
</script>

<style scoped>
.active{
    color:white;
}
.center{
    border: 2px solid yellowgreen;
    position:absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    margin-left:-200px;
    margin-top: -100px; 
    padding: 50px 60px;
    border-radius: 30px

}
</style>